<!-- 小组管理 -->
<template>
    <div>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="类别名称">
          <el-input
            clearable
            size="small"
            v-model="formInline.name"
            auto-complete="off"
            placeholder="请输入类别名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="getData">查询</el-button>
          <el-button size="small" type="primary" @click="add()" v-if="userInfo.role == 1">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table
        size="small"
        :data="datalist"
        highlight-current-row
        border
        element-loading-text="拼命加载中"
        style="width: 100%;"
      >
        <el-table-column align="center" sortable type="index" label="序号" min-width="150"></el-table-column>
        <el-table-column align="center" sortable prop="name" label="类别名称" min-width="100"></el-table-column>
        <el-table-column align="center" sortable prop="createTime" label="创建时间" min-width="100"></el-table-column>
        <!-- <el-table-column align="center" sortable prop="pic" label="设备照片" min-width="100">
          <template slot-scope="scope">
            <img
              v-if="scope.row.pic"
              style="width:20px; height: 20px;"
              :src="scope.row.pic"
              alt
              @click="getImgList(scope.row.pic)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" sortable prop="status" label="设备状态" min-width="100">
          <template
            slot-scope="scope"
          >{{scope.row.status == 1 ? '使用中':scope.row.status == 2 ? '正常':"报修中"}}</template>
        </el-table-column>
        <el-table-column align="center" sortable prop="purpose" label="用途" min-width="200"></el-table-column>
        <el-table-column align="center" sortable prop="attention" label="注意事项" min-width="200"></el-table-column> -->
        <el-table-column align="center" label="操作" width="150" v-if="userInfo.role == 1">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
            <!-- <el-button size="mini" type="primary" @click="update(scope.row)">修改</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page-box"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="pageparm.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageparm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageparm.total"
      ></el-pagination>
      <!-- <el-dialog :visible.sync="dialogVisible" title="图片展示">
        <img :src="currentImageUrl" width="50%" height="50%" alt />
      </el-dialog> -->
      <el-dialog :title="title" :visible.sync="addVisible" width="20%" @click="closeDialog()">
        <el-form ref="addData" :rules="configRules" :model="addData" label-width="100px">
              <el-form-item label="设备类别名称" prop="name">
                <el-input size="small" v-model="addData.name" auto-complete="off" placeholder="设备类别名称"></el-input>
              </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog()">取消</el-button>
          <el-button size="small" type="primary" class="title" @click="addGroup()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
    <script>
  import { getList, add, update, deleteDevice } from "../../api/xiaofang/deviceType";
  import { fileUpload } from "../../api/file";
  export default {
    data() {
      return {
        addData: {},
        configRules: {
          deviceNumber: [{ required: true, message: "必填", trigger: "change" }],
          deviceName: [{ required: true, message: "必填", trigger: "change" }]
        },
        pageparm: {
          currentPage: 0,
          pageSize: 10,
          total: 0
        },
        datalist: [],
        formInline: {},
        title: "",
        currentImageUrl: "",
        dialogVisible: false,
        addVisible: false,
        imageList: [],
        userInfo:{}
      };
    },
    created() {
      this.getData();
      this.userInfo = JSON.parse(sessionStorage.getItem("sysuser"))
    },
    methods: {
      fileRemove() {},
      importExcel(file) {
        this.urlData = null;
        let formData = new FormData();
        formData.append("multipartFile", file.raw);
        fileUpload(formData).then(res => {
          this.addData.pic = res.data;
        });
      },
      getImgList(url) {
        this.currentImageUrl = url;
        this.dialogVisible = true;
      },
      del(row) {
        deleteDevice(row.id).then(res => {
          if (res.status == 200) {
            this.$message.success("删除成功");
            this.getData();
          } else {
            this.$message.error(res.info);
          }
        });
      },
      update(row) {
        this.imageList = [];
        let url = {};
        url.name = "user.jpg";
        url.url = row.pic;
        this.imageList.push(url);
        this.addData = row;
        this.addVisible = true;
        this.title = "修改设备";
      },
      addGroup() {
        this.$refs.addData.validate(valid => {
          if (valid) {
            if (this.addData.id) {
              update(this.addData).then(res => {
                if (res.status == 200) {
                  this.$message.success("修改成功");
                  this.addVisible = false;
                  this.getData();
                } else {
                  this.$message.error(res.info);
                }
              });
            } else {
              add(this.addData).then(res => {
                if (res.status == 200) {
                  this.$message.success("保存成功");
                  this.addVisible = false;
                  this.getData();
                } else {
                  this.$message.error(res.info);
                }
              });
            }
          }
        });
      },
      closeDialog() {
        this.addVisible = false;
      },
      add() {
        this.imageList = [];
        this.addData = {};
        this.addVisible = true;
        this.title = "新增设备类别";
      },
      handleCurrentChange(val) {
        this.pageparm.currentPage = val;
        this.getData();
      },
      handleSizeChange(val) {
        this.pageparm.pageSize = val;
        this.getData();
      },
      getData() {
        this.formInline.pageIndex = this.pageparm.currentPage;
        this.formInline.pageSize = this.pageparm.pageSize;
        getList(this.formInline).then(res => {
          this.datalist = res.records;
          this.pageparm.total = res.total;
        });
      }
    }
  };
  </script>